import React, { Component } from 'react';
import { deepFullCopy, messages } from 'share/common';
import Condition from 'components/condition';
import Skeleton from 'components/skeleton';
import customField from 'share/customField';
import 'styles/payment-request/payment-field.scss';
import SlideFrame from 'components/slide-frame';
import NewPayment from 'containers/payment-request/new-payment';

const { If } = Condition;


class PaymentField extends Component {

  //处理一人多岗情况下，申请人的信息
  dealApplicantInfo = () => {
    const { applicant, jobInfo } = this.props;
    let applicantInfo = deepFullCopy(applicant || {});
    jobInfo && jobInfo.departmentOID && (applicantInfo.departmentOID = jobInfo.departmentOID);
    jobInfo && jobInfo.companyOID && (applicantInfo.companyOID = jobInfo.companyOID);
    return applicantInfo;
  };

  openDetail = () => {
    const { info, form, jobInfo } = this.props;
    SlideFrame.open({
      content: NewPayment,
      title: messages('expense-18.key22')/*编辑付款申请单*/,
      params: {
        expenseReport: info,
        formId: info.formOID,
        jobInfo,
        applicantJobId: info.applicantJobId
      },
      afterClose: this.handleClose,
    }, this);
  };

  handleClose = (flag) => {
    flag && this.props.refresh()
  };

  render() {
    const { loading, info, pageFrom, readOnly } = this.props;
    let custFormValues = info.custFormValues || []; //自定义表单
    custFormValues.map(item => {
      if (item.messageKey === 'attachment' || item.messageKey === 'image') {
        item.showFileName = true;
        item.attachmentImages.map(img => {
          img.fileName = img.fileName.replace(/(.*)_(\d*)(\.)/, '$1$3');
        });
      }
    });

    return (
      <section className="payment-field">
        <h3 className="payment-field-title">
          {messages('expense-18.key23')/*付款单详情*/}
          <If value={!readOnly}>
          <a className="payment-field-edit" onClick={this.openDetail}>
            {messages('common.edit')/*编辑*/}
          </a>
          </If>
        </h3>
        <Skeleton paragraph={2} loading={loading}>
          {customField.renderFields(custFormValues, info, this.dealApplicantInfo(), pageFrom)}
        </Skeleton>
      </section>
    );
  }
}

PaymentField.propTypes = {};

export default PaymentField;
